// 在此处写某类样式，是由于在嵌套中书写样式不会生效
// 当所写样式不生效时，应该考虑将其拿出来单独书写




// .el-cascader-menu__list,


// 首页左侧分类与中间轮播图：目的是让左侧分类子级在轮播图的上方（这样才能点击菜单中的选项
.el-cascader-menu

/* :last-child */
  {}


.home-menu {
  // -----------------------------------------为了测试样式增加的选项 2行---------------父元素设置flex布局，固定一边长度，其他自适应
  display: flex;
  flex-flow: row;

  .main-1 {

    // z-index: 100;
    // -----------------------------------------为了测试样式改动的选项 1行
    // float: left;
    // -----------------------------------------为了测试样式改动的选项 1行  结束
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    #cascader-paner-my {
      width: 179px;
    }

    .el-cascader-panel {
      box-shadow: 0 2px 4px #dbd9d98a, 0 0 6px #a9a9a9;

      .el-cascader-menu {
        color: #ecf5ff;
        border-right: solid 1px #303133;
        background: #303133;
        border-radius: 4px;

        z-index: 5;


        .el-cascader-menu__wrap {
          height: 378px;

          .el-cascader-node {
            &:hover {
              // 此处背景是鼠标点击/覆盖时菜单时的背景，加important的原因：以替换element 自带的样式

              // background: #2d2e2e !important;
              background: #2d2e2e ;
            }
          }
        }

      }
    }
  }

  .main-2 {
    // -----------------------------------------为了测试样式改动的选项 1行---------------父元素设置flex布局，固定一边长度，其他自适应
    flex: 3;
    // float: left;

    // -----------------------------------------为了测试样式改动的选项 1行  结束
    // z-index: -100;
    height: 378px;
    width: 814px;
    padding: 0 13px;

    .main-2-1 {

      // z-index: -2;
      .el-carousel {
        .el-carousel__item.is-active {
          // z-index: -2;
        }

        .el-carousel__item h3 {
          color: #475669;
          font-size: 18px;
          opacity: 0.75;
          line-height: 361px;
          margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
          background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n + 1) {
          background-color: #d3dce6;
        }
      }
    }
  }

  .main-3 {
    // -----------------------------------------为了测试样式改动的选项 1行---------------父元素设置flex布局，固定一边长度，其他自适应
    flex: 1;
    // float: left;
    // -----------------------------------------为了测试样式改动的选项 1行  结束
    width: 224px;
    height: 378px;

    .el-card {
      .el-card-a {
        // -----------------清除链接默认样式--------------------------包括去除下划线，字体
        text-decoration: none;
        color: inherit;
      }

      img {
        height: 80%;
        width: 100%;
      }
    }
  }

}